<template>
	<div class="tab" :key="key">
		<el-table :data="tableData" row-key="id" border @header-dragend="surverWidth">
			<!-- :fixed="index==0" -->
			<el-table-column  show-overflow-tooltip v-for="(item, index) in col" :key="index" :label="item.label"
				:width="item.width" :prop="dropCol[index].prop" v-if="item.isChecked&&item.is_show==1">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="300">
				<template slot-scope="scope">
					<span class="text-blue margin-right-xs cp">办理</span>
					<span class="text-gray margin-right-xs">l</span>
					<span class="text-olive margin-right-xs cp">查阅</span>
					<span class="edit margin-right-xs cp">修改</span>
					<span class="text-purple margin-right-xs cp">进度</span>
					<span class="close-red margin-right-xs cp">关闭</span>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	export default {
		name: 'basetable',
		props:{
			tableData:Array,
			col:Array,
			dropCol:Array,
		},
		data() {
			return {key:0};
		},
		mounted() {
			this.columnDrop()
		},
		methods: {
			//更新列表
			updateCheck(){
				let dropCol = JSON.parse(localStorage.getItem('dropCol'))
				this.$parent.changeDragDrop(dropCol)
			},
			//tab宽度
			surverWidth(newWidth, oldWidth, column, event){
				const index=this.dropCol.findIndex(item => item.label == column.label);
				this.dropCol[index].width=newWidth
				this.$parent.changeDragDrop(this.dropCol)
			},
			//自定义列
			handleCheckedChange(value){
				this.dropCol.forEach((val,key)=>{
					var arrindex=value.findIndex((item, index, arr)=>{
						return item==val.label
					})
					if(arrindex==-1){
						val.isChecked=false
					}else{
						val.isChecked=true
					}
				})
				localStorage.setItem('dropCol', JSON.stringify(this.dropCol))
				this.updateCheck()
				this.columnDrop()
			},
			// 列拖拽
			columnDrop() {
				const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
				this.sortable = this.$sortable.create(wrapperTr, {
					animation: 180,
					delay: 0,
					onEnd: evt => {
						const dropCol=this.dropCol.filter(item=>{return item.isChecked})
						const oldItem = dropCol[evt.oldIndex]
						const newItem = dropCol[evt.newIndex]
						const oldIndex = this.dropCol.findIndex(item => item.id == oldItem.id);
						const newIndex = this.dropCol.findIndex(item => item.id == newItem.id);
						this.dropCol.splice(oldIndex, 1)
						this.dropCol.splice(newIndex, 0, oldItem)
						this.key ++
						this.col = this.dropCol
						this.dropCol=this.dropCol
						this.$parent.changeDragDrop(this.dropCol)
						// updateDragDrop({row:{apply:this.dropCol}}).then(res => {this.columnDrop()});
					}
				})
			}
		}
	};
</script>

<style lang="less">
	.el-date-editor--daterange.el-input,
	.el-date-editor--daterange.el-input__inner,
	.el-date-editor--timerange.el-input,
	.el-date-editor--timerange.el-input__inner,
	/deep/.el-input__inner {
		width: 310px !important;
	}
	.tab {
		height: 100%;
		// border-bottom: 1px solid #f0f0f0;/
		-webkit-transition: all .3s ease-in;
		-moz-transition: all .3s ease-in;
		transition: all .3s ease-in;
	}
</style>

